<template>
  <div class="form_wrapper">
    <el-form ref="form" :model="formData" :rules="roleRules" label-width="100px">
      <el-row :gutter="20" v-for='(item, index) in formItem' :key='item.prop + index'>
        <el-col :span="24" v-if="item.typeC === 'Input'">
          <el-form-item :label="item.label" :prop="item.prop">
            <el-input :type="item.type" v-model="formData[item.prop]" clearable :placeholder="item.placeholder"
              :disabled="item.disabled" :rows="item.rows">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="item.typeC === 'Select'">
          <el-form-item :label="item.label" :prop="item.prop">
            <el-select v-model="formData[item.prop]" :placeholder="item.placeholder">
              <el-option v-for="op in item.options" :key="op.value" :label="op.label" :value="op.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="item.typeC === 'Datetime'">
          <el-form-item :label="item.label" :prop="item.prop">
            <el-date-picker v-model="formData[item.prop]" :type="item.type" @change="onChangeBox"
              :placeholder="item.placeholder" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
              :disabled="item.disabled">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="item.typeC === 'Switch'">
          <el-form-item :label="item.label" :prop="item.prop">
            <el-switch v-model="formData[item.prop]" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </el-form-item>
        </el-col>
        <!-- Checkbox: v-model值为数组-->
        <el-col :span="24" v-if="item.typeC === 'Checkbox'">
          <el-form-item :label="item.label" :prop="item.prop">
            <el-checkbox-group v-model="formData[item.prop]" @change="onChangeBox">
              <el-checkbox v-for="op in item.options" :key="op.value" :label="op.value" :disabled="item.disabled">
                {{ op.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="item.typeC === 'Radio'">
          <el-form-item :label="item.label" :prop="item.prop">
            <el-radio-group v-model="formData[item.prop]" @change="onChangeRadio">
              <el-radio v-for="op in item.options" :key="op.value" :label="op.value" :disabled="item.disabled">
                {{ op.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- Upload：多张上传v-model值为数组 -->
        <el-col :span="24" v-if="item.typeC === 'Upload'">
          <el-form-item :label="item.label" :prop="item.prop">
            <Upload :params="item.params" @fileList="getImgUrl" @removeImg="removeImg" @addFile="addFile"></Upload>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="item.typeC === 'Img'">
          <el-form-item :label="item.label" :prop="item.prop">
            <img :src="formData[item.prop]" alt="">
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import Upload from '@/commont/plugins/uploadImg.vue';
export default {
  components: { Upload },
  props: {
    formData: { type: Object, default: () => { } },
    formItem: { type: Array, default: () => [] },
    roleRules: { type: Object, default: () => { } },
  },
  data() {
    return {
      dateTime: '',
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  updated() { },
  methods: {
    // 多选
    onChangeBox(data) {
      console.log('多选', data);
      this.formItem.forEach(item => {
        if (item.typeC == 'Datetime') {
          this.formData[item.prop] = data;
        }
      })
    },
    // 单选
    onChangeRadio(data) {
      this.formItem.forEach(item => {
        if (item.typeC == 'Radio') {
          this.formData[item.prop] = data;
        }
      })
    },
    // 上传
    getImgUrl(data) {
      console.log('Element:', data)
      this.formItem.forEach(item => {
        if (item.typeC == 'Upload') {
          this.formData[item.prop].push(data);
        }
      })
      console.log(this.formItem);
    },
    // 删除
    removeImg(val) {
      console.log('Element-remove:', val)
      this.formItem.forEach(item => {
        if (item.typeC == 'Upload') {
          this.formData[item.prop] = this.formData[item.prop].filter(ele => ele.name != val.name);
        }
      })
    },
    // 添加文件
    addFile(data) {
      this.$emit('addFile', data)
    },
  },
  filters: {},
}
</script>

<style lang="scss" scoped></style>